<!-- 绑定手机号 -->
<template>
  <view class="registerPage screen-width">
    <navBar :title="`绑定手机号`" />
    <view class="register_main">
      <view class="main_item">
        <input type="text" name id placeholder="请输入手机号码" v-model="dataList.phoneNumber" />
      </view>
      <view class="main_item">
        <input type="text" name id placeholder="请输入短信验证码" v-model="dataList.code" maxlength="6" />
        <text @tap="getCode" v-show="isShow">获取验证码</text>
        <text v-show="!isShow">{{ val }}后重发</text>
      </view>
      <view class="main_btn" @tap="submitForm">提交</view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import navBar from "../../components/topBar.vue";
import { isMobile } from "../../util/validator.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    navBar
  },
  data() {
    //这里存放数据
    return {
      dataList: {
        phoneNumber: "", // 手机号码
        code: "" // 短信验证码
      },
      val: 60, // 倒计时
      isShow: true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取验证码
    getCode() {
      // 表单中的值验证
      if (!isMobile(this.dataList.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      this.isShow = false;
      let data = {
        phoneNumber: this.dataList.phoneNumber,
        type: "UpdatePhoneNumber"
      };
      this.$get("/bmj-api/api/ums/umsUsers/sendVerificationCode", data).then(
        res => {
          if (res.code == 200) {
            uni.showToast({
              title: "验证码已发送您手机,请查收",
              duration: 2000,
              icon: "none"
            });
            let timeId = setInterval(() => {
              this.val--;
              if (this.val == 0) {
                this.val = 60;
                this.isShow = true;
                clearInterval(timeId);
              }
            }, 2000);
          } else {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: "none"
            });
            this.isShow = true;
          }
        }
      );
    },
    // 点击提交按钮
    submitForm() {
      // 表单中的值验证
      if (!isMobile(this.dataList.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (this.dataList.code == "") {
        uni.showToast({
          title: "请输入验证码",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      let data = {
        phoneNumber: this.dataList.phoneNumber,
        code: this.dataList.code,
        openId: ""
      };
      // 获取缓存中的openId
      let openId = uni.getStorageSync("openId");
      if (openId) {
        data.openId = openId;
        uni.removeStorageSync("openId");
      }
      let url = `/bmj-api/api/bindPhoneNumber?phoneNumber=${data.phoneNumber}&code=${data.code}&openId=${data.openId}`;
      this.$post(url).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: "绑定成功",
            duration: 2000,
            icon: "none"
          });
          uni.setStorageSync("Mtoken", res.message);
          uni.switchTab({
            url: "/pages/index/index"
          });
        } else {
          console.log(res.message);
          uni.showModal({
            title: "提示",
            content: res.message,
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                uni.setStorageSync("pageUrl", window.location.href);
                uni.navigateTo({
                  url: "/pages/login/index"
                });
              } else {
                uni.setStorageSync("pageUrl", window.location.href);
                uni.navigateTo({
                  url: "/pages/login/index"
                });
              }
            }
          });
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.registerPage {
  background: #fff;
  .register_main {
    padding: 0 40rpx;
    .main_item {
      display: flex;
      align-items: center;
      height: 120rpx;
      justify-content: space-between;
      input {
        flex: 1;
        font-size: 32rpx;
        &::placeholder {
          color: #c6cad3;
        }
      }
      text {
        padding: 14rpx 16rpx;
        background-color: #e8f3ff;
        color: #1678ff;
      }
    }
    .main_btn {
      margin-top: 80rpx;
      background-color: #1678ff;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>
